<template>
  <div class="member-profile">
  <div>
    <div class="top-image fullscreen-top"></div>
    <div class="list">
      <div class="item">
        <span class="item-text">项目介绍</span>
        <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
      </div>
    </div>
  </div>

    <div v-if="member" class="profile-container">
      <img :src="member.avatar || defaultAvatar" alt="成员头像" class="profile-avatar" />
      <div class="profile-info">
        <h2>{{ member.name }}</h2>
        <h4>{{ member.position }}</h4>
        <p>{{ member.introduction || '暂无个人简介。' }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getTeam } from '@/api/teamSys/team.js'   // ✅ 改成正确导出名
import defaultAvatar from '@/assets/images/wz.jpg'

const route = useRoute()
const member = ref(null)

onMounted(async () => {
  const id = route.query.id
  if (id) {
    try {
      const res = await getTeam(id)   // ✅ 调用 getTeam 而不是 getMemberById
      member.value = res.data
    } catch (error) {
      console.error('获取成员详情失败:', error)
    }
  }
})
</script>


<style scoped>
.top-image {
  width: 100%;
  height: 260px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-position: center;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 12px rgba(22, 93, 255, 0.2);
}

.list {
  display: flex;
  align-items: center;
  position: relative; /* 确保 ::after 的绝对定位相对于它 */
  z-index: 0; /* 默认最底层 */
}

.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px; /* 可根据需要调整对齐方式 */
  width: 100%;
  height: 90px; /* 背景条高度，可调整 */
  background-color: #eae4e4;
  z-index: 0; /* 背景在最底层 */
}

.list .item {
  position: relative; /* 保持原来的布局 */
  display: inline-block;
  margin-top: -30px;
  z-index: 1; /* 图片和文字覆盖灰色背景 */
}

.list .item-icon {
  display: block;
  position: relative;
  z-index: 1; /* 图片在灰色背景上 */
}

.list .item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2; /* 文字在最上层 */
}
.profile-container {
  max-width: 800px;
  margin: 60px auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.profile-avatar {
  width: 220px;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-info h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #a30b1b;
}

.profile-info h4 {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.profile-info p {
  line-height: 1.8;
  text-align: justify;
}
</style>
